/**
 * init
 */
/**
 * 随机高度，随机图片，布局函数
 */

var wf = {
  // 返回随机高宽的图片
  rdmImg: function(){
    var width = Math.floor(Math.random() * 100) + 300,
        height = Math.floor(Math.random() * 500) + 300;
    return "http://placekitten.com/" + height + '/' + width;
  },
  // 进行排列
  arrange: function(){
    var colsHeight = [0,86] ;
    let  itemWidth = 167;
    // 计算出列
    let  cols = 2;
    $(".photo-container").each(function( e ){
      let col = 0  , style="" ;
        // 获取第一个容器的宽
      if(colsHeight[0] < colsHeight[1]){
        col = 0 ;
        style = 'left:'+ (col * itemWidth  + 15 ) + 'px;' ;
      }else{
        col = 1 ;
        style = 'left:'+ (col * itemWidth  + 26  )+ 'px;' ;
      }
      style += "top :"+ colsHeight[col]+"px;"
      $(this).attr("style" ,style );
      colsHeight[col]+= $(this).height() ;
      document.getElementById("more").style.top = colsHeight[col]+"px" ;
    });
  },
}



export default {
    data() {
        return {
            photos: false,
            pageNum: 1,
            curPage: 0,
            pageSize: 10,
            showPage: false,
            showData:false
        }
    },
  filters: {
    thumbnail:function( url  , param){
      return url.replace(".png", param+".png"  ).replace(".jpg", param+".jpg"  )
    },
    subStr: function(str) {
        return str
    }
  },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.init();
        })
    },
    mounted() {

        // this.getImgs();
        this.init();
    },
    beforeRouteLeave (to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
      this.$util.droploadUpOnScroll()
      next();
    },
    methods: {
        init() {

            this.$util.setTitle('大赞门城');
            this.queryPhotoList();
            this.$util.droploadUpOnScroll(this.queryPhotoList, 'more', 'mainScroll')
        },
        /**
         * 获取列表
         */
        queryPhotoList() {
            //如果当前页==下一页则不发请求
            if (this.pageNum == this.curPage) {
                 return
            }else {
                this.curPage = this.pageNum;
            }
            let _this = this;
            var params = {
                "pageNum": _this.pageNum,
                "pageSize": _this.pageSize
            };
            this.$http.post( "praisingCity/getPhotoList", params ).then(function (rep) {
              if(rep.meta && rep.meta.code == '0') {

                    let datas = rep.data || [];
                    if( !_this.photos ){
                        _this.photos=[]
                    }


                  if(datas.length>0){
                    _this.loadImg( datas ,0) ;
                  }else{
                    _this.showData  = true
                  }

                }
            }).catch(function(err){
                console.log(err);
            })
        },
      /**
       * 排列组合
       */
      arrange(index) {

        let _this = this;
        if( _this.photos[index] &&  _this.photos[index].photo){
          _this.photos[index].photo = _this.photos[index].photo.replace("_17_10000_1_0.png", "_290_10000_100_0.png"  ).replace("_17_10000_1_0.jpg", "_290_1000_100_0.jpg"  ) ;
          _this.photos[index].load = true ;
        }
        wf.arrange();
      },
      /**
       * 加载图片
       * @param {*} arr
       * @param {*} index
       */
      loadImg(arr,index){
        let _this = this;
        let img = new Image();
        img.onerror=function(){
          nextImg();
          arr[index].load =  true ;
        };
        img.onload=nextImg;
        function nextImg(){
          _this.photos.push( arr[index] );
          if(index < arr.length){
            _this.loadImg(arr,index + 1);
            //是否有下一页
            if ( index +1 >= _this.pageSize) {
              _this.pageNum++;
            }
          }
        }
        if(arr[index] && arr[index].photo){
          img.src = arr[index].photo.replace(".png", "_17_10000_1_0.png"  ).replace(".jpg", "_17_10000_1_0.jpg"  ) ;
          arr[index].photo =  arr[index].photo.replace(".png", "_17_10000_1_0.png"  ).replace(".jpg", "_17_10000_1_0.jpg"  )
          arr[index].load =  false ;
        }
      },

        /**
         * 点赞
         */
        praise(item) {
            let _this = this;
            let param = {
                "id": item.id
            }
            _this.$http.post('/praisingCity/praise',param).then(function(rep){
                if(rep.meta && rep.meta.code == '0') {
                    item.praised = !item.praised;
                    if(item.praised) {
                        item.praiseCount = item.praiseCount - 0 + 1;
                    }else {
                       item.praiseCount = item.praiseCount - 0 - 1;
                    }

                }
            }).catch(function() {

            })
        },
        /**
         * 跳转详情
         */
        godetail(id) {
            this.$router.push({'name': 'detail',query:{'id':id}})
        },
        goPhoto(){
            let code = sessionStorage.getItem('toon_code');
            let url = '/conv-photo/index.html?code='+ code
            window.location.href = url ;
        }

    }


}
